// src/components/MissionStats.tsx
import React from "react";
import { formatDuration, formatArea } from "./utils";
import type { MissionStats } from "./utils";

interface MissionStatsProps {
  stats: MissionStats | null;
}

const MissionStatsComponent: React.FC<MissionStatsProps> = ({ stats }) => {
  if (!stats) return null;

  return (
    <div className="mt-5 p-4 bg-[#3a3a3a] rounded-md border border-[#4a4a4a]">
      <h4 className="text-lg font-semibold text-[#e0e0e0] mb-3 pb-2 border-b border-dashed border-[#5a5a5a]">
        任务统计
      </h4>
      <p className="text-sm text-[#c0c0c0] mb-1">
        飞行时长:{" "}
        <span className="font-bold text-[#007bff]">
          {formatDuration(stats.duration)}
        </span>
      </p>
      <p className="text-sm text-[#c0c0c0] mb-1">
        飞行距离:{" "}
        <span className="font-bold text-[#007bff]">
          {stats.distance.toFixed(2)}m
        </span>
      </p>
      <p className="text-sm text-[#c0c0c0] mb-1">
        拍照数量:{" "}
        <span className="font-bold text-[#007bff]">{stats.photos}张</span>
      </p>
      <p className="text-sm text-[#c0c0c0]">
        覆盖面积:{" "}
        <span className="font-bold text-[#007bff]">
          {formatArea(stats.area)}
        </span>
      </p>
    </div>
  );
};

export default MissionStatsComponent;
